<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RabbitMQ Chat</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 定时请求最新的消息
        function fetchMessages() {
            $.get('/messages', function(data) {
                // 更新消息列表
                $('#messages').empty();
                if (data.messages !== "No messages available") {
                    data.messages.forEach(function(message) {
                        $('#messages').append('<li>' + message + '</li>');
                    });
                } else {
                    $('#messages').append('<li>No messages available</li>');
                }
            });
        }

        // 发送消息
        function sendMessage(message) {
            $.post('/send', { message: message });
        }

        $(document).ready(function() {
            // 每隔1秒钟请求一次最新的消息
            setInterval(fetchMessages, 1000);

            // 发送消息
            $('#sendForm').submit(function(event) {
                event.preventDefault();
                var message = $('#messageInput').val();
                sendMessage(message);
                $('#messageInput').val('');
            });
        });
    </script>
</head>
<body>
    <h1>RabbitMQ Chat</h1>
    <ul id="messages">
        <!-- 消息列表将通过 JavaScript 更新 -->
    </ul>
    <form id="sendForm" method="post" action="/send">
        <input type="text" id="messageInput" name="message" placeholder="Enter your message">
        <button type="submit">Send</button>
    </form>
</body>
</html>
